// eslint-disable-next-line import/no-cycle
/* 所有能创建的类型的集合 */
// eslint-disable-next-line no-shadow
export enum IType {
  RECT = "rect",
  TEXT = "text",
  SVG = "svg",
  CANVAS = "canvas",
  QRCODE = "qrcode",
  BARCODE = "barcode",
  DTEXT = "d-text",
  DQRCODE = "d-qrcode",
  DBARCODE = "d-barcode",
  DIMAGE = "d-image",
  DVIDEO = "d-video",
  NULL = "",
  IMAGE = "image",
  VIDEO = "video"
}

/* 控制手柄的名称 */
export type handlesType = "tl" | "tm" | "tr" | "ml" | "mr" | "bl" | "bm" | "br";
export interface IShapeProps {
  /* ID,用于增删改查 */
  id: string;
  w: number;
  h: number;
  x: number;
  y: number;
  z: number;
  /* 控制水平|垂直移动 */
  axis: "x" | "y" | "both";
  /* 步进，[x,y]轴 */
  grid: [number, number];
  /* 禁止用户选择里面的内容 */
  disableUserSelect: boolean;
  /* 点击外部关闭 */
  preventDeactivation: boolean;
  /* 最小宽度 */
  minWidth: number;
  /* 最小宽度 */
  minHeight: number;
  /* 是否为激活状态 */
  active: boolean;
  /* 是否允许拖拽 */
  draggable: boolean;
  /* 是否锁定大小 */
  lockAspectRatio: boolean;
  /* 是否允许调整大小 */
  resizable: boolean;
  /* 是否允许拖出框外 */
  parent: boolean;
  /* 控制手柄 */
  handles: Array<handlesType>;
  /* 组件类名，相当于class='**' */
  classNameDraggable: string;
  /* 在调整大小时，显示该样式 */
  classNameResizable: string;
  /* 在拖拽时，显示该样式 */
  classNameDragging: string;
  /* 组件在活跃的时候显示的类 */
  classNameActive: string;
  /* 缩放时手柄显示的类 */
  classNameHandle: string;
  /* 调整大小中显示的类 */
  classNameResizing: string;
  [key: string]: any;
  /* 隐藏图形 */
  show: boolean;
  /* 锁定图形，禁止任何操作 */
  lock: boolean;
  /* 是否具有外边框 */
  hasBorder: boolean;
  /* 每个形状对应的图标，显示在图层中 */
  icon: string;
}

export interface IShapeEvent {
  /* 激活触发 */
  activated: any;
  /* 失去焦点触发 */
  deactivated: any;
  /* 拖拽开始时触发 */
  dragStart: any;
  /* 拖拽过程中时触发 */
  dragging: any;
  /* 拖拽结束时触发 */
  dragEnd: any;
  /* 调整大小开始时触发 */
  resizeStart: any;
  /* 调整大小结束时触发 */
  resizeEnd: any;
}

/* 通用导航接口 */
export interface IShapeNavConfigProps {
  /* 是否显示图标 */
  showIcon: boolean;
  icon: any;
  title: string;
  type: IType;
  children?: Array<IShapeNavConfigProps>;
  showSubItems?: boolean;
  event?: any;
}
